<template>
    <div class="center">
        <div class="common-layout ">
            <el-container>
                <el-aside width="700px">
                    <div v-for="item in list" class="tt">
                        <div class="bigimg">
                            <el-image style="width: 600px; height: 822px" :src="`http://localhost:8080/${item.cimg}`" />
                        </div>
                        <br />
                        <div class="smallimg">
                            <el-image style="width: 80px; height: 56px" :src="`http://localhost:8080/${item.cimg}`" />
                            <div style="width: 80px; height:4px;background-color: rgb(204, 28, 104);"></div>
                            <!-- <hr style="background-color:rgb(204, 28, 104); height:2px;" /> -->
                        </div>
                    </div>
                </el-aside>
                <el-aside width="500px">
                    <div v-for="item in list" class="nr">
                        <div class="title">
                            <h1 s>{{ item.cname }}#{{ item.releasenum - item.residual + 1 }}</h1>
                            <P style="font-size: 16px; margin-top:-45px;">
                                编号：#{{ item.releasenum - item.residual + 1 }}/{{ item.releasenum }}</P>
                        </div>
                        <div>
                            <span style="background-color:#abaab9;">发行</span>
                            <span> :{{ item.releasenum }}份</span> &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="background-color:#abaab9;">流通</span>
                            <span> :{{ item.releasenum - item.residual }}份</span>
                        </div>
                        <h1 class="price">￥{{ item.price }}</h1>
                        <el-button type="danger" v-if="a==1" @click="buy">立即购买</el-button>
                        <el-button disabled type="info" v-else-if="a==2">已下架</el-button>
                        <el-button disabled type="info" v-else-if="a==0">未登录</el-button>
                        <el-button disabled type="info" v-else-if="a==3">已售罄</el-button>
                        <el-button disabled type="info" v-else-if="a==4">未发行</el-button>
                        
                        <hr />
                        <h1 style="font-size: 30px;"> 作品描述：</h1>
                        <div class="description">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.content }}</div>

                    </div>


                </el-aside>
            </el-container>
        </div>
        <div>
            <h1>关于数字藏品</h1>
            数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
        </div>
    </div>

    <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
    <span>
      确认购买
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          购买
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

import { ElMessage } from 'element-plus'
export default {
    name: 'Detail',

    data() {
        return {
            orderslist:{username:'',cname:'',price:'',cimg:''},
            list:[],
            sj:false,
            newDate: new Date(),
            a:0,
            centerDialogVisible:false,
            uname:'',
            userlist:[],
            addlist:{ username :'', cname:'',cid:'',price:''},
        };
    },

    mounted() {
        this.uname=sessionStorage.getItem('token');
        let that = this
        this.timer = setInterval(function () {
        that.newDate = new Date().toLocaleString()
        })

        // this.$http.get("/VpiServlet/queryById?id="+this.$route.query.id)
        // .then((response)=>{
        //     this.list=response.data;
        // })
        this.cx();

        this.$http.get("/BuyServlet/queryUserAll?username="+this.uname)
        .then((res)=>{
        this.userlist=res.data;
        })
        
    },

    methods: {
        cx(){
            this.$http.get("/VpiServlet/queryById?id="+this.$route.query.id)
        .then((response)=>{
            this.list=response.data;
            console.log(this.list);
        })
        },
        clicked() {
            if (sessionStorage.getItem('token') == null) {
                this.a = 0;
                // console.log(this.a);
            }
            else {
                // console.log(this.a);
                this.list.forEach(item => {
                    // console.log(Date.now() - item.startdate);
                    // console.log(147);
                    if (Date.now() > item.startdate) {
                        if (Date.now() < item.enddate) {
                            if (item.residual > 0) {
                                console.log(2);
                                this.a = 1;//正常售卖
                                this.sj = true;
                            }
                            else {
                                console.log(4);
                                this.a = 3;//已售罄
                            }
                        }
                        else {
                            console.log(5);
                            this.a = 2;//已下架
                            this.sj = false;
                        }
                    }
                    else{
                        this.a=4;
                    }
                })
            }

        },
        buy(){
            this.centerDialogVisible=true;
            
            // console.log(this.list[0].price);


            
        },
        submit(){
        // var url='http://localhost:8080/BuyServlet/queryMoney';
        // this.$http.post(url,this.uname)

            if(this.userlist[0].money<this.list[0].price){
                ElMessage({
                  showClose: true,
                  message: '余额不足',
                  type: 'error',
                })
                this.centerDialogVisible=false;
            }
            else{
                this.addlist.username=this.uname;
                this.addlist.cname=this.list[0].cname;
                this.addlist.price=this.list[0].price;
                this.addlist.cid=this.list[0].releasenum-this.list[0].residual+1;

                this.orderslist.username=this.uname;
                this.orderslist.cname=this.list[0].cname;
                this.orderslist.price=this.list[0].price;
                this.orderslist.cimg=this.list[0].cimg;

                console.log(this.addlist);
                var url='http://localhost:8080/BuyServlet/addIdcollection';
                this.$http.get('/BuyServlet/reviseByid?id='+this.$route.query.id)
                .then((res)=>{

                })

                this.$http.post(url,this.addlist)
                .then((res)=>{
                    if(res.meta.status === 200){
                        ElMessage({
                  showClose: true,
                  message: '购买成功',
                  type: 'success',
                })
                
                    }
                })

                this.$http.get('/BuyServlet/DeductionsByUsername?username='+this.uname+'&price='+this.addlist.price)
                .then((res)=>{
                   
                })

                var url='http://localhost:8080/BuyServlet/addOrders';
                this.$http.post(url,this.orderslist)
                .then((result) => {
                    this.cx();
                    this.centerDialogVisible=false;
                    
                }).catch((err) => {
                    
                });

                
            }
        },

    },
    watch:{
        newDate(){
            // console.log(1);
            this.clicked();
        }
    },
    
};
</script>

<style lang="css" scoped>
/* div{
    display: inline-block;
} */
.bigimg{
    /* margin-left: -100px; */
    margin-top: 20px;
    display: inline;
    
}
.el-image{
    border-radius: 10px;
    
}
.smallimg{
    /* margin-left: -620px; */
    margin-top: 10px;
    
}
.text{
    background-color: red;
    transform:translateY(-50%);/**上移元素**/
}
.nr{
    /* margin-left: -350px; */
}
.title{
    display: inline;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: #2c2c34;
}
.price{
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: #2c2c34;
}

.description{
    /* background-color: aliceblue; */
    background: #fefefe;
    box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
    border-radius: 10px;
    color: rgba(44,44,52,.5);
    word-break: break-all;
    line-height: 50px;
}
</style>